<template>
	<view class="topBar">
		<view class="topBar__first">
			<view class="address choose-column" @click.stop="goAddressPage" v-if="diningMode==='wx_out'">
				<text class="iconfont icon-weizhitubiao"></text>
				<text class="building-txt overflow-ellipsis">{{deliveryAddress.building}}</text>
				<text class="iconfont icon-gengduoxuanzetubiao"></text>
			</view>
			<view class="store choose-column" @click.stop="goStorePage">
				<text v-if="diningMode==='wx_out'">由 {{currentStoreInfo.name}} 送出</text>
				<text v-else>{{currentStoreInfo.name}}</text>
				<text class="iconfont icon-gengduoxuanzetubiao"></text>
			</view>
			<view class="store-tips" v-if="diningMode==='wx_zq' && currentStoreInfo.distance">
				<template v-if="currentStoreInfo.distance > 1">
					距离您的位置约 {{currentStoreInfo.distance}} km
				</template>
				<template v-else>
					距离您的位置约 {{currentStoreInfo.distance * 1000}} m
				</template>
			</view>
			<view class="store-tips" v-if="diningMode==='wx_zq' && !currentStoreInfo.distance">
				未获取到您的位置
			</view>
		</view>
		<view class="topBar__second">
			<button class="coupon-btn l-btn btn-primary" hover-class="btn-hover">{{menuCouponNum}}优惠券</button>
			<view class="egq" v-if="expiringNum!==0">有{{expiringNum}}张快要过期了</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MenuHeader',
		props: {
			// 可用券（代金券和产品券）数量
			menuCouponNum: {
				type: Number,
				default () {
					return 0;
				}
			},

			// 快过期的券数量
			expiringNum: {
				type: Number,
				default () {
					return 0;
				}
			}
		},
		data() {
			return {

			}
		},
		computed: {
			diningMode() {
				return this.$store.state.diningMode;
			},

			// 当前门店信息
			currentStoreInfo() {
				return this.$store.state.currentStoreInfo;
			},

			// 配送地址
			deliveryAddress() {
				return this.$store.state.deliveryAddress;
			}
		},
		methods: {
			goAddressPage() {
				uni.showToast({
					title: '前往地址页面',
					icon: 'none'
				})
			},

			goStorePage() {
				uni.navigateTo({
					url: '/pages/store/store'
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	@import '~@/common/styles/common.less';
	@import "./menu-header.less";
</style>
